<template>
	<view class="container">
		<top-back-navbar position="fixed" title="仓单转分红券" background="" color="#fff"></top-back-navbar>
		<cxsytabbars :current="2"></cxsytabbars>
		<view v-if="num>0" :style="`background-image: url('/static/zn/${num}_num.png');
			background-size: 100% 100%;
			 background-repeat:no-repeat`" class="num_bg">
			<view class="num">
				{{num}} <span class="txt">个
				</span>
			</view>


		</view>
		<view class="" style="width: 100%; text-align: center; color: #fff;font-size: 25px;">
			{{bei}}倍分红券
		</view>
		<view class="" style="width: 100%; text-align: center; color: #fff;font-size: 18px;">
			当前选择
		</view>
		
		<view class="box">
			<view class="title">
				分红权益
			</view>
			<view class="item_box">
				<view class="item" v-for="item,index in data_list"	@click="active_inedx =index;get_bei(item)" >
					<view class="item_num">
						{{item.num}}个
					</view>
					<view class="item_txt">
						{{item.bei}}倍分红券
					</view>
					<view class="xuanzhong" v-show="index == active_inedx">
						<image src="/static/zn/bei_select.png" mode="" style="width: 20px;height: 20px;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="button" @click="zhuanhuan(num)">
			确{{nonBreakingSpace}}定
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				nonBreakingSpace: '\u00A0\u00A0\u00A0',
				tixian_x: 0,
				tixian_y: 0,
				openid: 0,
				shouyi: 0,
				qianbao_data: {},
				active_inedx: 0,
				data_list: [],
				num: 0,
				bei: 0,
			};
		},
		onLoad: function(e) {

			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					_this.openid = id
					_this.get_data()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});



		},
		methods: {
			set_data(value) {
				var data_list = value.list

				this.data_list = data_list
				console.log(data_list);
				this.init_data(this.data_list)
			},
			init_data(value) {
				this.bei = value[0].bei
				this.num = value[0].num
				this.active_inedx = 0
			},
			get_bei(value) {

				this.bei = value.bei
				this.num = value.num
			},
			zhuanhuan(num) {
				let _this = this
				uni.showModal({
					// title: '温馨提示',
					content: `确定${num}个仓单转分红券吗？`,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#628EFE',
					confirmColor: "#628EFE",
					success(res) {
						if (res.confirm) {
							_this.sure_zhuanhuan(num)
						}


					}
				})
			},
			sure_zhuanhuan(num) {
				var _this = this
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_static_chicang&app=1&type=za&openid=' +
						openid + '&num=' + num,

					success: res => {
						var data = res.data
						var code = data.error
						console.log(data);
						if (code == 1) {
							uni.showToast({
								icon: 'none',
								title: data.message,
								success() {
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}
							})
						} else {
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position: 'center',
								success() {
									setTimeout(() => {
										_this.get_data()
									}, 2000)
								}
							})
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_data() {
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_static_chicang_index&app=1&type=za&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						if (code == 1) {
							uni.navigateTo({
								url: '/pagesZA/qianbao/qianbao'
							});
						} else {
							this.set_data(data)
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_openid(id) {
				this.openid = id
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {

		height: 100vh;
		background: url('/static/zn/fenhongquan_bg.png') 0 0 no-repeat;
		// background-size: 150% 106%;
		position: relative;
		padding: 10px 20px 104px;
	}

	.num_bg {
		width: 100%;
		height: 470rpx;

		background-size: contain;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.num {
			color: #8C83FF;
			font-size: 100px;
			// font-weight: 800;
			// border: 1px solid red;
			line-height: 80px;
		}

		.txt {
			font-size: 20px;
			color: #8C83FF;
		}
	}
	.box{
		width: 100%; 
		background-color: #34326B;
		border-radius: 15px 15px 0 0;
		overflow: hidden;
		.title{
			width: 100%;
			background-color: #3E3C77;
			color: #fff;
			font-size: 20px;
			text-align: center;
		}
		.item_box{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: 33.33%;
				
				text-align: center;
				margin: 20rpx 0;
				color: #fff;
				position: relative;
				.item_num{
					color: #8D8BAE;
				}
				.xuanzhong{
					position: absolute;
					top: 3px;
					right: 5px;
				}
			}
		}
	}
	.button{
		background-color: #6A41EA;
		text-align: center;
		color: #fff;
		width: 30%;
		border-radius: 50px;
		margin: 40rpx auto;
	}
</style>